<!--
 * @Description: 
 * @Author: YaoXiaotTian
 * @Date: 2021-05-27 22:30:53
 * @LastEditors: helei
 * @LastEditTime: 2021-06-15 14:34:41
-->
<template>
  <div class="login">
    <div class="vessle">
      <div class="title">登录</div>
      <div class="input_vessle">
        <el-input placeholder="账号" v-model.trim="account">
          <i slot="prefix" class="el-input__icon el-icon-user"></i>
        </el-input>
      </div>
      <div class="input_vessle">
        <el-input placeholder="密码" show-password v-model.trim="password">
          <i slot="prefix" class="el-input__icon el-icon-lock"></i>
        </el-input>
      </div>
      <div class="input_vessle verification">
        <el-input placeholder="验证码" v-model.trim="code" maxlength="4">
          <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          <template slot="append">
            <div @click="refreshCode">
              <SIdentify :identifyCode="identifyCode" />
            </div>
          </template>
        </el-input>
      </div>
      <div class="forget">
        <span>忘记密码？</span>
      </div>

      <el-button plain @click="login">登 录</el-button>
      <div class="adduser" @click="registeredFun">立即注册</div>
    </div>
  </div>
</template>

<script>
import SIdentify from "../../components/identify";
import { set_data, get_data } from "../../utils/utils";
export default {
  components: {
    SIdentify,
  },
  props: {},
  data() {
    return {
      account: "",
      password: "",
      code: "",
      identifyCodes: "0123456789",
      identifyCode: "",
    };
  },
  watch: {},
  computed: {},
  created() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  mounted() {},
  methods: {
    registeredFun() {
      this.$router.push({
        path: "/registered",
      });
    },
    login() {
      if (!this.account) {
        this.$message.error("账号不能为空");
        return;
      }
      if (!this.password) {
        this.$message.error("密码不能为空");
        return;
      }
      if (!this.code) {
        this.$message.error("验证码不能为空");
        return;
      }
      if (this.code != this.identifyCode) {
        this.$message.error("验证码输入有误");
        return;
      }
      this.$http
        .fetch(this.$apiPath.login, {
          method: "post",
          data: {
            passWord: this.password,
            userName: this.account,
          },
        })
        .then((res) => {
          if (res.code != 200) {
            this.$message.error(res.msg);
            return;
          }
          this.$message.success("登录成功");
          let prev_link = get_data("prev_link");
          let userInfo = res.data;
          set_data("userInfo", JSON.stringify(userInfo));
          set_data("token", userInfo.authToken);
          if (!prev_link) {
            this.$router.replace({
              path: "/",
            });
            return;
          } else {
            this.$router.replace({
              path: prev_link,
            });
          }
        })
        .catch((res) => {
          // console.log(888);
          // 400的情况
          // this.$message.error("用户不存在或密码错误！");
        });
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode +=
          this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
      }
      console.log(this.identifyCode);
    },
  },
  // 监听路由
  beforeRouteEnter(to, from, next) {
    let fullPath = from.fullPath;
    if (
      fullPath &&
      fullPath.indexOf("/Login") == -1 &&
      fullPath &&
      fullPath.indexOf("/registered") == -1 &&
      fullPath != "/"
    ) {
      set_data("prev_link", fullPath);
    }
    next();
  },
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
